<script lang="ts" setup>
const options = [
  {
    class: "p_clock",
    title: "周期授权"
  },
  {
    class: "p_code",
    title: "多语言支持"
  },
  {
    class: "p_plane",
    title: "全新UI"
  },
  {
    class: "p_menu",
    title: "多应用授权"
  },
  {
    class: "p_pay",
    title: "在线支付"
  },
  {
    class: "p_record",
    title: "盗版入库"
  },
  {
    class: "p_sale",
    title: "订单系统"
  },
  {
    class: "p_service",
    title: "工单系统"
  },
  {
    class: "p_user",
    title: "自主授权"
  },
  {
    class: "p_cloud",
    title: "安全稳定"
  },
  {
    class: "p_data",
    title: "数据可视化"
  },
  {
    class: "p_lock",
    title: "安全稳定"
  }
]
</script>

<template>
  <t-row class="container_first">
    <div>
      <h1>安全、稳定、高效的云产品授权系统</h1>
      <p>系统经过多次改进和升级，旨在为客户提供更优雅的使用体验</p>
    </div>
  </t-row>

  <t-row class="container_second">
    <t-col v-for="item in options" :key="item" :lg="2" :md="3" :sm="3" :xl="2" :xs="4" class="col">
      <t-space class="module" direction="vertical">
        <i :class="item.class" class="spirit_icon_pro" />
        <span>{{ item.title }}</span>
      </t-space>
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
p {
  font-size: 13px;
}

.container_first {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}

.container_second {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 0;


  .module {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
